<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <style>
        .login{
            padding: 20% 20% 20% 40%;
        }
        .el-input {
            width: 45%;
        }
        .l{
            float: right;

            margin-right: 55%;
        }
        .r,.l{
            margin-top: 1%;
        }
    </style>
</head>

<body>
    <div id="app">
        <a v-bind:href="home" id="home" hidden></a>
        <div class="login">
            <div>
                <el-input placeholder="请输入内容" v-model="phoneNumberOrEmailVO.phoneNumberOrEmail" clearable></el-input>
            </div>
            <div>
                <el-input placeholder="请输入密码" v-model="phoneNumberOrEmailVO.consumerPassword" show-password></el-input>
            </div>
            <div>
                <el-row>
                    <el-button class="r">注册</el-button>
                    <el-button class="l" @click="login(phoneNumberOrEmailVO)">登录</el-button>
                </el-row>
                <el-row>
                   
                </el-row>
            </div>
        </div>
    </div>
</body>

<script>
    let vm = new Vue({
        el: '#app',
        data: {
            home: 'http://localhost:63342/blog/blog-client-controller/web/WEB-INF/home.html?_ijt=k4rfimk6cmev0ev3e0gamkatpr',
            phoneNumberOrEmailVO:{
                phoneNumberOrEmail: '',
                consumerPassword: ''
            }
        },
        methods: {
            login(phoneNumberOrEmailVO) {
                axios.post('http://127.0.0.1:8181/consumer/login', phoneNumberOrEmailVO).then(
                    e => {
                        localStorage.setItem("consumer",JSON.stringify(e.data.responseObject))
                         document.getElementById('home').click();
                    })
                }
            },
    })
</script>

</html>